.consultant-page {
  background-color: #fffefd;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  &.hasBind {
    padding: 44px 0 50px;
  }
  img {
    width: 100%;
  }
}

.consultant-top {
  background: transparent;
  .back-icon {
    background-position: -360px 9px;
  }
}

.consultant-main {
  padding: 0 20px;
  margin-top: -120px;
}

.consultant-box {
  position: relative;
  width: 100%;
  padding: 62px 28px;
  box-shadow: 0 0 15px 0 rgba(253, 167, 56, 0.3);
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  .avatar {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  h2 {
    color: #333;
    font-size: 3rem;
    line-height: 100%;
    margin-bottom: 8px;
  }
  p {
    color: #666;
    font-size: 1.4rem;
    margin: 0;
  }
  .invitation-code {
    height: 44px;
    padding: 10px;
    margin-top: 46px;
    &:before {
      border: 1px solid #ddd;
      border-radius: 44px;
    }
    input {
      position: relative;
      display: block;
      width: 100%;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border: none;
      font-size: 1.5rem;
      &::-webkit-input-placeholder, &:-moz-placeholder, &:-ms-input-placeholder {
        color: #ccc;
      }
    }
  }
  .err-tip {
    color: #ff0629;
    font-size: 1.2rem;
    height: 40px;
    padding-top: 6px;
  }
}

.consultant-popup {
  .mask {
    display: block;
  }
}

.consultant-con {
  position: fixed;
  width: 74.66%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  .popup-close-icon {
    position: absolute;
    right: 0;
    top: -42px;
  }
  .consultant-img {
    width: 100%;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.consultant-info {
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  h2 {
    color: #333;
    font-size: 2rem;
    text-align: center;
    line-height: 38px;
  }
  ul {
    padding: 0 20px 10px;
    margin: 0;
  }
  .flex-box {
    display: -webkit-box;
    display: -moz-box;
    font-size: 1.2rem;
    label {
      color: #999;
      width: 50px;
    }
    div {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      color: #333;
    }
  }
  .bind-btn {
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 1.8rem;
    color: #444;
    text-align: center;
    background-color: #ffd800;
  }
}

.consultant-message {
  padding: 20px 0;
  text-align: center;
  h2 {
    font-size: 3rem;
    color: #333;
    line-height: 100%;
    margin-bottom: 30px;
  }
  .flex-box {
    display: -webkit-box;
    display: -moz-box;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  li {
    position: relative;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 0;
    &:not(:last-child):after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      border-right: 1px solid #ebebeb;
      transform: scaleX(0.5);
    }
    p {
      font-size: 1.2rem;
      color: #999;
      margin: 0 0 7px;
    }
    div {
      font-size: 1.4rem;
      color: #333;
    }
  }
}
.footer-con {
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  width: 100%;
  z-index: 1002;
  > span {
    display: block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    height: 50px;
    line-height: 50px;
    font-size: 1.7rem;
    color: #434343;
    background-color: #fed900;
    text-align: center;
    &.on {
      background-color: #fff099;
      color: #d2c683;
    }
  }
}
